<template>
  <div class="trace-list-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">
跟进记录管理
</h2>
    </div>

    <!-- 搜索表单 -->
    <el-card class="search-card"
:body-style="{ padding: '16px 20px' }">
      <el-form
        ref="queryFormRef"
        :model="queryForm"
        :inline="true"
        label-width="80px"
        class="search-form"
      >
        <el-form-item label="关键词">
          <el-input
            v-model="queryForm.keywords"
            placeholder="请输入跟进内容或客户名称"
            clearable
            class="search-input"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="跟进人">
          <el-select
            v-model="queryForm.admin_id"
            placeholder="请选择跟进人"
            clearable
            class="search-select"
          >
            <el-option
              v-for="admin in adminOptions"
              :key="admin.id"
              :label="admin.name"
              :value="admin.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
type="primary" @click="handleSearch">
查询
</el-button>
          <el-button @click="handleReset">
重置
</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据展示区域 -->
    <el-card class="data-card">
      <!-- 表格工具栏 -->
      <div class="table-toolbar">
        <el-button
type="success" @click="handleAdd">
新增跟进
</el-button>
        <el-button type="danger"
@click="handleBatchDelete" :disabled="selectedTraces.length === 0">
          批量删除
        </el-button>
      </div>

      <!-- 跟进记录表格 -->
      <el-table
        v-loading="loading"
        :data="traceList"
        border
        stripe
        class="data-table"
        height="calc(100vh - 330px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"
width="55" />
        <el-table-column prop="content"
label="跟进内容" min-width="200" show-overflow-tooltip>
          <template #default="scope">
            <div class="trace-content-cell">
              <el-icon><ChatLineRound /></el-icon>
              <span class="text-ellipsis">{{ scope.row.content }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="customer_name"
          label="客户名称"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column
          prop="admin_name"
          label="跟进人"
          width="120"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="create_time"
          label="跟进时间"
          width="180"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ formatDateTime(scope.row.create_time) || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="next_time"
          label="下次跟进"
          width="180"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ formatDateTime(scope.row.next_time) || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作"
width="150" fixed="right" class="table-action-column">
          <template #default="scope">
            <el-button size="small"
type="primary" plain @click="handleView(scope.row)">
              查看
            </el-button>
            <el-dropdown>
              <el-button size="small"
plain>
                更多
                <el-icon><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleEdit(scope.row)">
编辑
</el-dropdown-item>
                  <el-dropdown-item
divided @click="handleDelete(scope.row)">
删除
</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <BasePagination
          v-model="queryForm.page"
          v-model:page-size="queryForm.limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>

    <!-- 跟进记录详情抽屉 -->
    <GlobalDrawer
      v-model="detailDrawerVisible"
      title="跟进详情"
      size="80%"
      :show-footer-buttons="false"
    >
      <div class="drawer-content">
        <el-descriptions :column="2"
size="large" border>
          <el-descriptions-item label="客户名称">
            {{ currentTrace.customer_name }}
          </el-descriptions-item>
          <el-descriptions-item label="跟进人">
            {{ currentTrace.admin_name }}
          </el-descriptions-item>
          <el-descriptions-item label="跟进时间">
            {{ currentTrace.create_time || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="下次跟进">
            {{ currentTrace.next_time || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="跟进内容"
:span="2">
            {{ currentTrace.content }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </GlobalDrawer>

    <!-- 新增/编辑跟进记录抽屉 -->
    <GlobalDrawer
      v-model="drawerVisible"
      :title="traceOperationMode === 'add' ? '新增跟进' : '编辑跟进'"
      size="80%"
      :close-on-click-modal="true"
      @confirm="handleSubmit"
    >
      <div class="drawer-content">
        <el-form
          ref="traceFormRef"
          :model="traceForm"
          :rules="traceRules"
          label-width="100px"
          class="trace-form"
        >
          <el-form-item label="客户"
prop="cid">
            <el-select
              v-model="traceForm.cid"
              placeholder="请输入客户名称搜索"
              filterable
              remote
              :remote-method="remoteSearchCustomers"
              :loading="customerLoading"
            >
              <el-option
                v-for="customer in customerOptions"
                :key="customer.id"
                :label="customer.name"
                :value="customer.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="跟进内容"
prop="content">
            <el-input
              v-model="traceForm.content"
              type="textarea"
              :rows="4"
              placeholder="请输入跟进内容"
            />
          </el-form-item>
          <el-form-item label="下次跟进时间"
prop="next_time">
            <el-date-picker
              v-model="traceForm.next_time"
              type="date"
              placeholder="请选择下次跟进时间"
              format="YYYY-MM-DD"
              value-format="x"
              style="width: 100%"
            />
          </el-form-item>
        </el-form>
      </div>
    </GlobalDrawer>
  </div>
</template>

<script setup lang="ts">
  // 从外部文件导入所有逻辑
  import {
    // 响应式数据
    queryForm,
    traceList,
    total,
    loading,
    selectedTraces,
    detailDrawerVisible,
    currentTrace,
    drawerVisible,
    traceOperationMode,
    traceForm,
    traceRules,
    customerOptions,
    adminOptions,
    customerLoading,
    traceFormRef,
    queryFormRef,

    // 方法
    handleSearch,
    handleReset,
    remoteSearchCustomers,
    handleAdd,
    handleEdit,
    handleView,
    handleDelete,
    handleBatchDelete,
    handleSelectionChange,
    handleSizeChange,
    handleCurrentChange,
    closeDetailDrawer,
    closeDrawer,
    handleSubmit,
    loadCustomerOptions,
    loadAdminOptions,
    formatDateTime,
  } from './TraceListScript'

  // 导入组件
  import { ArrowDown, ChatLineRound } from '@element-plus/icons-vue'
  import { GlobalDrawer } from '@/components/common'
  import BasePagination from '@/components/base/BasePagination.vue'
  import { onMounted } from 'vue'

  // 初始化加载
  onMounted(async () => {
    // 加载管理员选项
    await loadAdminOptions()
    // 加载跟进记录列表
    handleSearch()
  })
</script>

<style scoped src="./TraceListStyle.scss"></style>
